<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>07_阻止默认事件</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul,
      li {
        list-style: none;
      }

      ul {
        width: 200px;
        position: absolute;
        display: none;
      }

      li {
        width: 100%;
        height: 40px;
        /* 宽度包含border 设置为content-box则宽度不包含border */
        box-sizing: border-box;
        border: 2px solid #333;
      }

      li.active {
        background-color: #ccc;
      }
    </style>
  </head>

  <body>
    <a href="https://www.baidu.com" id="aBaidu">百度一下</a>

    <ul id="myMenu">
      <li>修身</li>
      <li>齐家</li>
      <li>治国</li>
      <li>撩妹</li>
    </ul>

    <!-- 
    prevent 预防/阻止
    default 默认的
    confirm 确认
    -->
    <script>
      var a = document.querySelector("a");

      a.addEventListener("click", function (e) {
        // 阻止浏览器的【点击a标签时原地跳转其href】默认行为
        e.preventDefault();
        // console.log("精确读完这句话将受赠班长的所有武林秘籍的目录");

        var iWillGo = window.confirm(
          "您将要访问一个极其没有节操的网站，确认前往吗?"
        );
        if (iWillGo) {
          // window.location.href = a.href
          window.location.assign(a.getAttribute("href"));
        }
      });
    </script>

    <!-- 禁用右键菜单 -->
    <script>
      // 找出自定义菜单元素
      var myMenu = document.querySelector("#myMenu");

      // 找出所有菜单项
      var lis = myMenu.querySelectorAll("li");

      /* 给所有自定义菜单项目li添加事件 */
      lis.forEach(function (li, index) {
        // console.log(li);

        // mouseenter/mouseleave不会冒泡 本例中li自己就把事件消费掉了 无需向上级汇报
        // 而mouseover/mouseout会冒泡给父元素 本例中无此需求
        li.addEventListener("mouseenter", function () {
          // 当前菜单项li高亮
          this.classList.add("active");
        });

        li.addEventListener("mouseleave", function () {
          // 当前菜单项li移除高亮样式
          this.classList.remove("active");
        });

        li.addEventListener("click", function (e) {
          // 显式菜单项文本
          console.log(this.innerText);
          // myMenu消失
          myMenu.style.display = "none";
        });
      });

      document.addEventListener("contextmenu", function (e) {
        e.preventDefault();

        // 获取事件发生的位置（参照物选页面）
        console.log(e.pageX, e.pageY);

        // 让自定义菜单恰好出现在事件位置
        myMenu.style.left = e.pageX + "px";
        myMenu.style.top = e.pageY + "px";
        myMenu.style.display = "block";
      });
    </script>
  </body>
</html>
